<template>
  <div class="gerenxinxi">
    <!-- 导航栏 -->
    <div class="header">
      <backTitle></backTitle>
      <span class="title">个人信息</span>
    </div>

    <!-- 头像 -->
    <div class="img">
      <span>头像</span>
      <span class="img-circle">
        <img :src="img" alt />
      </span>
    </div>

    <!-- 昵称 -->
    <div class="name">
      <span>昵称</span>
      <van-cell @click="clickname">{{name}}</van-cell>
      <van-popup v-model="nameshow" round>
        <van-field v-model="namemsg" center clearable placeholder="请输入昵称" maxlength="12">
          <van-button slot="button" size="small" type="primary" @click="modifyname">保存</van-button>
        </van-field>
      </van-popup>
    </div>

    <!-- 性别 -->
    <div class="sex">
      <span>性别</span>
      <van-cell @click="clicksex">{{sex}}</van-cell>
      <van-popup v-model="sexshow" round>
        <van-radio-group v-model="sex">
          <van-cell-group>
            <van-cell title="男" clickable @click="sex = '男',sexshow=false">
              <van-radio slot="right-icon" name="男" checked-color="red" />
            </van-cell>
            <van-cell title="女" clickable @click="sex = '女',sexshow=false">
              <van-radio slot="right-icon" name="女" checked-color="red" />
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </van-popup>
    </div>

    <!-- 生日 -->
    <div class="birthday">
      <span>生日</span>
      <van-cell @click="clickbir">{{birthday}}</van-cell>
      <van-popup v-model="birshow" round>
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="请选择日期"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="birconfirm"
          @cancel="bircancel"
        />
      </van-popup>
    </div>

    <!-- 地区 -->
    <div class="city">
      <span>地区</span>
      <van-cell @click="clickcity">{{city}}</van-cell>
      <van-popup v-model="cityshow" round :style="{ height: '60%' }">
        <van-area
          :area-list="areaList"
          value="110101"
          :columns-num="2"
          title="请选择城市"
          :item-height="50"
          :visible-item-count="6"
          @confirm="cityconfirm"
          @cancel="citycancel"
        />
      </van-popup>
    </div>

    <!-- 签名 -->
    <div class="signature">
      <span>签名</span>
      <van-cell @click="clicksign">{{signature}}</van-cell>
      <van-popup v-model="signshow" position="bottom">
        <van-panel>
          <div>
            <van-field
              v-model="signmsg"
              rows="5"
              autosize
              type="textarea"
              maxlength="50"
              placeholder="请输入签名"
              show-word-limit
              clearable
            />
          </div>
          <div slot="footer" class="signbtn">
            <van-button size="small" type="primary" @click="modifysign">保存</van-button>
          </div>
        </van-panel>
      </van-popup>
    </div>

    <van-button type="default"  class="confirminfo" size="normal" round @click="modifyinfo">保存信息</van-button>
  </div>
</template>

<script>
import backTitle from "../../components/back";
import send from "../../navshow";

// 导入城市id
import AreaList from "../js/Area";

export default {
  data() {
    return {
      img: "", //头像
      name: "", //昵称
      sex: "", //性别
      birthday: "", //生日
      city: "", //城市
      cityid: "", //城市id
      cityname: "", //城市名字
      provinceid: "", //省份id
      provincename: "", //省份名字
      signature: "", //签名
      nameshow: false, //昵称弹出层
      sexshow: false, //性别弹出层
      birshow: false, //生日弹出层
      cityshow: false, //城市弹出层
      signshow: false, //签名弹出层
      areaList: AreaList, //城市id数据
      namemsg: "", //昵称文本
      signmsg: "", //签名文本
      activeNames: "1",
      // 日期格式
      minDate: new Date(1900, 1, 1),
      maxDate: new Date(2099, 12, 31),
      currentDate: new Date()
    };
  },
  created() {
    // 隐藏导航栏
    send.$emit("tab-show", false);
    // 隐藏播放器
    this.$store.commit("showplayer", false);

    // 获取用户信息
    var date=new Date()

    var url = "http://120.26.184.71:4000/user/detail?uid=" + sessionStorage.getItem("id")+"&timestamp"+date.getTime();
    this.axios.get(url).then(res => {
      this.img = res.data.profile.avatarUrl;
      this.name = res.data.profile.nickname;
      this.sex = res.data.profile.gender;
      this.city = res.data.profile.city;
      this.cityid = res.data.profile.city;
      this.signature = res.data.profile.signature;

      var cityarr = this.areaList.city_list; //获取城市数据
      var provincearr = this.areaList.province_list; //获取省份数据

      // 将城市id转换为省id
      var num = Math.floor(this.city / 10000) * 10000;
      this.provinceid = num;

      // 遍历省id获取省名
      for (let key in provincearr) {
        if (key == num) {
          this.provincename = provincearr[key];
        }
      }

      // 遍历城市id获取城市
      for (let key in cityarr) {
        if (key == this.city) {
          this.cityname = cityarr[key];
        }
      }
      this.city = this.provincename + " " + this.cityname;

      // 计算生日
      var time = res.data.profile.birthday;
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      this.birthday = year + "-" + month + "-" + day;

      // 判断性别
      switch (this.sex) {
        case 0:
          this.sex = "保密";
          break;
        case 1:
          this.sex = "男";
          break;
        case 2:
          this.sex = "女";
          break;
      }
    });
  },
  methods: {
    // 昵称弹出层
    clickname() {
      this.nameshow = true;
    },

    // 修改昵称
    modifyname() {
      if (this.namemsg) {
        this.name = this.namemsg;
      }
      this.nameshow = false;
    },

    // 性别弹出层
    clicksex() {
      this.sexshow = true;
    },

    // 生日弹出层
    clickbir() {
      this.birshow = true;
    },

    // 生日确认按钮
    birconfirm(val) {

      this.birshow = false;
      var date = new Date(val);
      const year = date.getFullYear();
      const month = date.getMonth()+1;
      const day = date.getDate();
      this.birthday = year + "-" + month + "-" + day; //格式化
    },

    // 生日取消按钮
    bircancel() {
      this.birshow = false;
    },

    // 城市弹出层
    clickcity() {
      this.cityshow = true;
    },

    // 省市区确认按钮
    cityconfirm(val) {
      this.cityshow = false;
      this.provinceid = val[0].code;
      this.cityid = val[1].code;
      var provincename = val[0].name;
      var cityname = val[1].name;
      this.city = provincename + " " + cityname; //将省份和城市拼接在一起
    },

    // 省市区取消按钮
    citycancel() {
      this.cityshow = false;
    },

    // 签名弹出层
    clicksign() {
      this.signshow = true;
    },
    // 修改签名
    modifysign() {
      this.signature = this.signmsg;
      this.signshow = false;
    },

    // 保存信息
    modifyinfo() {
      var modifysex;

      // 判断性别
      if (this.sex == "男") {
        modifysex = "1";
      } else {
        modifysex = "2";
      }

      // 将日期转换为时间戳
      var date = new Date(this.birthday);
      let d = new Date();
      var timestamp = date.getTime();

      var date = new Date();

      var url =
        "http://120.26.184.71:4000/user/update?gender=" +
        modifysex +
        "&signature=" +
        this.signature +
        "&city=" +
        this.cityid +
        "&nickname="+
        this.name +
        "&birthday=" +
        timestamp +
        "&province=" +
        this.provinceid +
        "&timestamp=" +
        date.getTime();

      console.log(url);

      // 更改用户信息
      this.axios({
        url,
        withCredentials: true //关键
      }).then(res => {
        console.log(res.data);
        if (res.status == 200) {
          this.$toast("修改成功");
        }
      });
    }
  },
  components: {
    backTitle
  }
};
</script>

<style>
/* 头部 */
.gerenxinxi {
  width: 100vw;
}

.gerenxinxi .header {
  width: 100vw;
  height: 70px;
  background-color: #222831;
  display: flex;
  align-items: center;
}

.gerenxinxi .header .title {
  margin-left: 26vw;
  font-size: 24px;
  color: white;
}

.gerenxinxi .img,
.gerenxinxi .name,
.gerenxinxi .sex,
.gerenxinxi .birthday,
.gerenxinxi .city,
.gerenxinxi .signature {
  width: 90vw;
  height: 60px;
  margin: 5px auto 0;
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid lightgray;
}

.gerenxinxi .img > .van-cell,
.gerenxinxi .name > .van-cell,
.gerenxinxi .sex > .van-cell,
.gerenxinxi .birthday > .van-cell,
.gerenxinxi .city > .van-cell,
.gerenxinxi .signature > .van-cell {
  width: 80% !important;
  padding: 0 !important;
}

.van-cell div {
  text-align: right;
  color: #333333;
  font-size: 16px;
}

.confirminfo {
  background-color: #231F20 !important;
}

.confirminfo span {
  color: white;
}

/* 头像 */
.gerenxinxi .img-circle img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

/* 昵称弹出层 */
.gerenxinxi .name .van-popup {
  width: 85vw;
}

/* 性别弹出层 */
.gerenxinxi .sex .van-popup {
  width: 80vw;
}
.gerenxinxi .sex .van-popup .van-cell div {
  text-align: left;
}

/* 生日弹出层 */
.gerenxinxi .birthday .van-ellipsis {
  width: 25vw;
  font-size: 18px;
}

/* 城市弹出层 */
.gerenxinxi .van-picker {
  width: 85vw;
}

.gerenxinxi .city .van-ellipsis {
  width: 42.5vw;
  font-size: 18px;
}

.gerenxinxi .van-picker button {
  font-size: 16px;
}

/* 签名弹出层 */
.gerenxinxi .signbtn {
  display: flex;
  justify-content: flex-end;
}

.gerenxinxi .signbtn button {
  margin-bottom: 10px;
}

/* 保存修改 */
.gerenxinxi .confirminfo {
  width: 40vw;
  margin-top: 40px;
  left: 30%;
}
</style>